<template>
  <div class="loginBox">
    登录组件--- {{ $store.state.count }}

    <span> 你好</span>

    <ul>
      <li><a href=""> 哈哈</a></li>
    </ul>
  </div>

  <button @click="handlerclick"> 点击触发count ++</button>

  <button @click="asnycHandlerclick"> 异步点击触发count ++</button>


  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>

  <el-form :model="form" label-width="120px">
    <el-form-item label="Activity name">
      <el-input v-model="form.name" />
    </el-form-item>

  </el-form>
</template>

<script setup>

import { reactive } from 'vue'
import { useStore } from 'vuex'

// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const onSubmit = () => {
  console.log('submit!')
}



const store = useStore()


//  同步验证vuex 
const handlerclick = () => {
  store.commit('addCount')

}


// 异步验证vuex 
const asnycHandlerclick = () => {
  store.dispatch(
    'asyncAddCount'
  )
}
</script>

<style lang="scss" scoped>
$color: #00c;

/* 蓝色 */
.loginBox {
  span {
    color: $color
  }


  ul {
    li {
      color: $color;


      a {
        background-color: green;
      }
    }
  }


}
</style>